<template>
  <div class="page-content">
    <div class="page-header">
      <h1 class="page-title">服务市场</h1>
      <p class="page-description">一键部署基础组件和常用服务</p>
    </div>

    <!-- 分类筛选 -->
    <div class="flex gap-4 mb-6">
      <button 
        v-for="category in categories" 
        :key="category.id"
        @click="selectedCategory = category.id"
        class="px-4 py-2 rounded-lg font-medium transition-colors"
        :class="selectedCategory === category.id ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
      >
        {{ category.name }}
      </button>
    </div>

    <!-- 服务网格 -->
    <div class="grid grid-cols-3 gap-6">
      <div v-for="service in filteredServices" :key="service.id" class="card hover:shadow-lg transition-shadow">
        <div class="card-content">
          <div class="flex items-start gap-4">
            <div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center">
              <span class="text-white font-bold text-xl">{{ service.name.charAt(0) }}</span>
            </div>
            <div class="flex-1">
              <h3 class="font-semibold text-lg mb-2">{{ service.name }}</h3>
              <p class="text-gray-600 text-sm mb-3">{{ service.description }}</p>
              <div class="flex items-center gap-4 text-xs text-gray-500 mb-4">
                <span class="flex items-center gap-1">
                  <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                  版本 {{ service.version }}
                </span>
                <span>{{ service.downloads }} 下载</span>
                <span>⭐ {{ service.rating }}</span>
              </div>
              <div class="flex gap-2">
                <button 
                  @click="deployService(service)"
                  class="btn btn-primary btn-sm flex-1"
                  :disabled="service.deploying"
                >
                  {{ service.deploying ? '部署中...' : '一键部署' }}
                </button>
                <button class="btn btn-secondary btn-sm">详情</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="filteredServices.length === 0" class="text-center py-12">
      <div class="text-gray-400 text-lg">该分类下暂无服务</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Service {
  id: string
  name: string
  description: string
  version: string
  category: string
  downloads: string
  rating: number
  deploying?: boolean
}

interface Category {
  id: string
  name: string
}

const selectedCategory = ref('all')

const categories: Category[] = [
  { id: 'all', name: '全部' },
  { id: 'database', name: '数据库' },
  { id: 'cache', name: '缓存' },
  { id: 'message', name: '消息队列' },
  { id: 'monitoring', name: '监控' },
  { id: 'security', name: '安全' }
]

const services = ref<Service[]>([
  {
    id: '1',
    name: 'MongoDB',
    description: '高性能的文档数据库，支持水平扩展和复制',
    version: '6.0',
    category: 'database',
    downloads: '10k+',
    rating: 4.8
  },
  {
    id: '2',
    name: 'Redis',
    description: '内存数据结构存储，用作数据库、缓存和消息代理',
    version: '7.0',
    category: 'cache',
    downloads: '15k+',
    rating: 4.9
  },
  {
    id: '3',
    name: 'PostgreSQL',
    description: '强大的开源关系型数据库系统',
    version: '15.0',
    category: 'database',
    downloads: '8k+',
    rating: 4.7
  },
  {
    id: '4',
    name: 'RabbitMQ',
    description: '可靠的消息队列系统，支持多种消息协议',
    version: '3.11',
    category: 'message',
    downloads: '5k+',
    rating: 4.6
  },
  {
    id: '5',
    name: 'Prometheus',
    description: '开源监控和告警工具包',
    version: '2.40',
    category: 'monitoring',
    downloads: '12k+',
    rating: 4.8
  },
  {
    id: '6',
    name: 'Grafana',
    description: '开源的度量分析和可视化套件',
    version: '9.3',
    category: 'monitoring',
    downloads: '9k+',
    rating: 4.7
  },
  {
    id: '7',
    name: 'Elasticsearch',
    description: '分布式搜索和分析引擎',
    version: '8.5',
    category: 'database',
    downloads: '7k+',
    rating: 4.5
  },
  {
    id: '8',
    name: 'Nginx',
    description: '高性能的HTTP和反向代理服务器',
    version: '1.23',
    category: 'security',
    downloads: '20k+',
    rating: 4.9
  }
])

const filteredServices = computed(() => {
  if (selectedCategory.value === 'all') {
    return services.value
  }
  return services.value.filter(service => service.category === selectedCategory.value)
})

const deployService = async (service: Service) => {
  service.deploying = true
  
  // 模拟部署过程
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))
    alert(`${service.name} 部署成功！`)
  } catch (error) {
    alert(`${service.name} 部署失败！`)
  } finally {
    service.deploying = false
  }
}
</script>

<style scoped>
.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.transition-shadow {
  transition: box-shadow 0.2s ease;
}

.transition-colors {
  transition: color 0.2s ease, background-color 0.2s ease;
}

.flex-1 {
  flex: 1;
}

.w-16 {
  width: 4rem;
}

.h-16 {
  height: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.h-2 {
  height: 0.5rem;
}

.text-xs {
  font-size: 0.75rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-blue-400 {
  --tw-gradient-from: #60a5fa;
  --tw-gradient-to: rgb(96 165 250 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-600 {
  --tw-gradient-to: #2563eb;
}
</style>
